<template>
  <div @click="handleDetail" :class="['bg-fff','p-30',isBorder?'border':'border-b']">
    <div class="flex justify-between">
      <div class="fs-30">
        {{jobData.jobname}}
        <!-- 方法1: -->
        <!-- <van-tag plain :type="jobData.cfytype==1?'warning':'success'">
          {{jobData.cfytype==1?'实习':'兼职'}}
        </van-tag> -->
        <!-- 方法2: -->
        <van-tag plain type="warning" v-if="jobData.cfytype==1">实习</van-tag>
        <van-tag plain type="success" v-else>兼职</van-tag>
      </div>
      <span class="fs-24 color-yellow">
        {{jobData.salary}}元/月
      </span>
    </div>
    <div class="welfare">待遇</div>
    <div class="flex justify-between fs-24 color-666">
      <p>
        {{jobData.address}}
      </p>
      <span>{{jobData.district}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      isBorder: { //决定组件四周是否加边框
        type: Boolean,
        default: false
      },
      jobData:{ //岗位信息数据包
        type:Object,
        required:true
      }
    },
    methods: {
      handleDetail() {
        localStorage.setItem('jobId',this.jobData._id)
        this.$router.push({
          path:'/detail'
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.border{
  border: 1px solid #d8d8d8;
  margin: 3rem;
}
.border-b{
  border-bottom: 1px solid #d8d8d8;
}
.welfare{
  margin: 5rem 0;
}
</style>